いわゆるJAMstackを用いたWebメディアなどでは、コンテンツの構成が記事ごとに少しずつ違うけれどもマークダウンでは表現力が制限されるため、本文などコンテンツの一部をHTMLで記述して表示したいという状況はそれなりにあると思います。 そのような状況で、外部サービスから提供されるスクリプトタグを含んだコンテンツを表示したい、という要件に対応したものです。

ReactにはdangerouslySetInnerHTMLを用いることで、任意のDOM要素の子要素としてHTMLを挿入することができます。 ただし、この機能は内部的にinnerHTML用いています。innerHTMLはXSS攻撃に対する対策としてタグを実行しません。(ただし、インベントハンドラとしてスクリプトを実行することは可能です) そのため、スクリプトタグを含むHTMLはdangerouslySetInnerHTMLで設定することはできますが、そのスクリプトは実行されないということになります。

WebAPIのappendChildメソッドは特定のノードに対して子ノードを追加するメソッドです。 このメソッドによって追加されたノードは通常のノードと同様に実行されるため、追加されたスクリプトタグも実行されます。 文字列として渡されたHTMLから要素を生成する際は、createContextualFragmentメソッドを用います。これはHTMLタグを含む文字列から、指定された範囲の開始点を起点とするドキュメントフラグメントを生成するメソッドです。

Reactでの擬似的なコードは以下となります。

ただし、上記のコードではいくつか対応できないパターンがあります。

appendChildによって追加すると、2つのスクリプトタグが同時に実行されるため、2番目のインラインスクリプトのhbsptがグローバル変数として存在しない状態で実行されることとなります。 この問題は、外部ファイルを読み込むスクリプトタグを先に追加・実行し、それが完了したのちに残りの要素を追加することで解決することが可能です。

外部ファイルを読み込むスクリプトタグの場合、ヘッダに追加して元のHTMLタグから取り除きます。 もし、すでに同じソースを読み込むスクリプトタグが存在する場合、多重の読み込みを防止するために処理をスキップします。 スクリプトタグのロードが完了した後に残りのHTMLを挿入することで、外部ファイルに依存するインラインスクリプトを問題なく実行することができます。

useLayoutEffectはサーバサイドでは実行されないため、SSR/SSGを行った際にレンダリングされていない状態となります。 この問題に対しては、挿入する要素に対して初期値を設定することで対応します。